﻿
@{
    ViewBag.Title = "添加盲水印";
}



<div>

    <!-- Nav tabs -->
    @*<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" role="tablist">
            <li role="presentation" class="active"><a href="#type1" role="tab" data-toggle="tab">上传时添加</a></li>
            <li role="presentation"><a href="#type2" role="tab" data-toggle="tab">下载时添加</a></li>

        </ul>*@
    <div class="content">
        <div class="row">

            <div class="col-sm-12">
                <blockquote class="alert alert-info">
                    <h4><b>介绍</b></h4>
                    <ul>
                        <li>
                            图片上传时添加盲水印的请求包与 PUT Object 接口一致，只需在请求包头部增加图片处理参数 Pic-Operations 并使用盲水印参数即可。
                        </li>
                        <li>图片上传完成后，COS 会存储原始图片和已处理过的图片。后续用户可以通过普通的下载请求获取处理结果</li>
                    </ul>
                </blockquote>




            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="widget-box">
                    <div class="widget-header"><h4 class="widget-title">参数配置</h4></div>
                    <div class="widget-body">
                        <div class="widget-main">
                            <ul class="steps">
                                <li data-step="1" class="active">
                                    <span class="step">1</span>
                                    <span class="title">选择原图片</span>
                                </li>
                                <li data-step="2">
                                    <span class="step">2</span>
                                    <span class="title">选择水印图</span>

                                </li>
                                <li data-step="2">
                                    <span class="step">3</span>
                                    <span class="title">提交</span>
                                </li>
                            </ul>
                            <hr>
                            <form class="form-horizontal" id="watermarkform">



                                <div class="form-group">

                                    <label class="col-sm-2 control-label no-padding-right">操作类型 </label>
                                    <div class="col-sm-10">
                                        <div class="radio col-sm-6" id="op-type-radio">
                                            <label>
                                                <input name="form-op-radio" type="radio" class="ace" data-target="op-upload-remark" data-val="1">
                                                <span class="lbl"> 上传时添加</span>
                                            </label>
                                            <label>
                                                <input name="form-op-radio" type="radio" class="ace" data-target="op-download-remark" data-val="2">
                                                <span class="lbl"> 下载时添加</span>
                                            </label>


                                        </div>
                                        <div class="col-sm-6" id="type-remark">
                                            <div class="alert alert-success remark" id="op-upload-remark">
                                                <ul>
                                                    <li> 上传新的图片作为原图，添加水印 </li>
                                                </ul>
                                            </div>
                                            <div class="alert alert-success remark" id="op-download-remark">
                                                <ul>
                                                    <li>选择服务器上已有的图片作为原图，添加水印</li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">

                                    <label class="col-sm-2 control-label no-padding-right">水印类型 </label>
                                    <div class="col-sm-10">
                                        <div class="radio col-sm-6" id="type-radio">
                                            <label>
                                                <input name="form-field-radio" type="radio" class="ace" data-target="type1-remark" data-val="1">
                                                <span class="lbl"> 半盲水印</span>
                                            </label>
                                            <label>
                                                <input name="form-field-radio" type="radio" class="ace" data-target="type2-remark" data-val="2">
                                                <span class="lbl"> 全盲水印</span>
                                            </label>
                                            <label>
                                                <input name="form-field-radio" type="radio" class="ace" data-target="type3-remark" data-val="3">
                                                <span class="lbl">文字水印</span>
                                            </label>
                                        </div>
                                        <div class="col-sm-6" id="type-remark">
                                            <div class="alert alert-success remark" id="type1-remark">
                                                <ul>
                                                    <li> 特性：抗攻击性强，但提取水印需原图 </li>
                                                    <li>
                                                        适用场景：<mark>鉴权追责</mark>
                                                        <br />
                                                        您可对图片资源增加半盲水印，在发现恶意攻击方盗取您的资源后将疑似被盗取图取回，并与相应原图进行盲水印提取操作，若能够得到有效水印图即可证明资源归属。

                                                    <li>
                                                        小图（640x640以下）使用
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="alert alert-success remark" id="type2-remark">
                                                <ul>
                                                    <li> 特性：提取方便，提取水印仅需水印图，无需对比原图.批量添加，批量校验 </li>
                                                    <li>
                                                        适用场景：<mark>上传查重</mark>
                                                        为解决部分用户使用其他用户资源重复上传相同信息的问题（如房产图、汽车图、商品图等），您可在用户上传图片资源前先进行全盲水印提取，若提取到水印图信息则证明该图片来自之前已有资源，并进行相应操作（如提醒用户请勿重复上传资源）；若不存在全盲水印则添加全盲水印，保护图片资源不被其他用户下载后重复上传
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="alert alert-success remark" id="type3-remark">
                                                <ul>
                                                    <li> 特性：可直接将文字信息添加至图片中 </li>
                                                    <li> 适用场景：<mark>终端信息添加 </mark></li>
                                                    <li>对于内部分享的图片资源，您可通过文字盲水印将访问方的信息在请求图片时添加至图片中，当资源泄露后可通过流传出的资源图提取出盲水印，进而得到泄露方信息</li>

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group" id="origin-img-row">

                                    <label class="col-sm-2 control-label no-padding-right">原图 </label>

                                    <div class="col-sm-10">
                                        <div class="col-sm-6">
                                            <div class="select-img-box ">
                                                <div class="img-wrapper position-absolute"> <img id="origin-img" class="img-container" onload="calMeta(this)" /></div>

                                                <div class="center-block">
                                                    <i class="icon-add_css"></i>
                                                    <i class="ace-icon glyphicon glyphicon-pencil" style="display:none;"></i>

                                                    <div>选择图片</div>
                                                </div>
                                                <div class="select-menu">
                                                    <span id="origin-img-gallery" class="img-gallery-btn" data-imgwrapper="origin-img" data-toggle="modal" data-target="#modal-gallery" title="选择原图">图库选择</span>
                                                    <span id="origin-img-upload" onclick="$('#origin-img-uploader').trigger('click')">本地上传</span>
                                                    <input type="file" id="origin-img-uploader" data-order="1" style="display:none;" name="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp" />
                                                </div>

                                            </div>
                                            <span class="img-meta"></span>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="alert alert-info" id="origin-remark">
                                                <ul>
                                                    <li>  图像尺寸：640x640以下</li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>


                                </div>

                                <div class="form-group" id="watermark-img-row">

                                    <label class="col-sm-2 control-label no-padding-right">水印图 </label>

                                    <div class="col-sm-10">
                                        <div class="col-sm-6">
                                            <div class="select-img-box ">
                                                <div class="img-wrapper position-absolute"> <img id="watermark-img" class="img-container" onload="calMeta(this)" /></div>

                                                <div class="center-block">
                                                    <i class="icon-add_css"></i>
                                                    <i class="ace-icon glyphicon glyphicon-pencil" style="display:none;"></i>

                                                    <div>选择图片</div>
                                                </div>
                                                <div class="select-menu">
                                                    <span id="watermark-img-gallery" class="img-gallery-btn" data-imgwrapper="watermark-img" data-toggle="modal" data-target="#modal-gallery" title="选择水印图">图库选择</span>
                                                    <span id="watermark-img-upload" onclick="$('#watermark-img-uploader').trigger('click')">本地上传</span>
                                                    <input type="file" id="watermark-img-uploader" data-order="2" style="display:none;" name="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp" />
                                                </div>

                                            </div>
                                            <span class="img-meta"></span>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="alert alert-info">
                                                <ul>
                                                    <li>  水印图的宽高不得超过原图的1/8。</li>
                                                    <li>  水印图请选用黑底白色图片。</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>


                                </div>


                                <div class="form-group" id="level-row">

                                    <label class="col-sm-2 control-label no-padding-right">全盲水印质量 </label>

                                    <div class="col-sm-10">
                                        <div class="col-sm-6">
                                            <select class="form-control" id="form-field-select-1" style="max-width:212px;">
                                                <option value="1" selected>底</option>
                                                <option value="2">中</option>
                                                <option value="3">高</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="alert alert-info">
                                                <ul>
                                                    <li>  只对全盲水印有效 取值范围为{1,2,3}，默认值为1 值越大则图片受影响程度越大、盲水印效果越好。。</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                                <div id="watermark-text-row" class="form-group">
                                    <label class="col-sm-2 control-label no-padding-right">水印文字 </label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-6">
                                            <input id="watermark-text-input" type="text" placeholder="输入水印文字内容" style=" width: 211.5px; padding-left: 12px;" oninput=" this.value = value.replace(/[^a-zA-Z0-9]/g, ''); postParams.watermarktext = this.value; return this.value;" onblur="enableSumbit()" />
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="alert alert-danger">
                                                <ul>
                                                    <li>限制：文字盲水印当前支持数字[0 - 9]及英文大小写[A - Z,a - z]</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-actions center">
                                    <button type="button" class="btn btn-sm btn-primary" id="reset" onclick="Init()">
                                        重置
                                        <i class="ace-icon fa fa-refresh icon-on-right bigger-110"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-success" id="submit">
                                        提交
                                        <i class="ace-icon fa fa-arrow-right icon-on-right bigger-110"></i>
                                    </button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5" style="display:none">
                @*<div class="widget-box widget-color-dark light-border ui-sortable-handle" id="widget-box-6">
                        <div class="widget-header">
                            <h5 class="widget-title smaller">响应控制台</h5>

                            <div class="widget-toolbar" style="cursor:pointer;">
                                <span class="badge badge-info" onclick="copy()">复制</span>
                                <span class="badge badge-danger">清空</span>
                            </div>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main padding-6">
                                <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" role="tablist">
                                    <li role="presentation" class="active"><a href="#raw-response" role="tab" data-toggle="tab">原始响应</a></li>
                                    <li role="presentation"><a href="#img-response" role="tab" data-toggle="tab">图片结果</a></li>

                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="raw-response">
                                        <pre id="response-result"></pre>
                                    </div>
                                    <div class="tab-pane active" id="img-response">
                                        <div style=" justify-content: center; display: flex; flex-wrap: wrap;">
                                            <div style=" flex-basis: 100%; text-align: center;">
                                                <img id="img-response-preview" src="" style="max-width:250px;" />
                                            </div>
                                            <div style=" text-align: center; padding: 20px;"><button class="btn btn-primary">去提取</button></div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>*@

            </div>
        </div>


    </div>


    <div class="modal fade" id="modal-gallery" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">选择图片</h4>
                </div>
                <div class="modal-body">
                    <ul class="ace-thumbnails clearfix" id="img-list">
                    </ul>
                    <div class="center" style=" background-color: #F5F5F5;border-top: 1px solid #E5E5E5;padding: 10px;margin:5px;"><button class="btn btn-primary" id="btn-loadmore" style="display:none">加载更多</button></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="gallery-submit">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div id="right-menu" class="modal aside aside-right aside-vc aside-fixed navbar-offset no-backdrop aside-hidden" data-body-scroll="false" data-offset="true" data-placement="right" data-fixed="true" data-backdrop="false" tabindex="-1" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content ace-scroll">
                <div class="scroll-track scroll-dark no-track idle-hide scroll-active" style="display: block; height: 429px;"><div class="scroll-bar" style="height: 169px; top: 0px;"></div></div><div class="scroll-content" style="">
                    <div class="modal-header no-padding">
                        <div class="table-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <span class="white">×</span>
                            </button>
                            响应控制台
                        </div>
                    </div>

                    <div class="modal-body">

                        <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" role="tablist">
                            <li role="presentation" class="active"><a href="#raw-response" role="tab" data-toggle="tab">原始响应</a></li>
                            <li role="presentation"><a href="#img-response" role="tab" data-toggle="tab">图片结果</a></li>

                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="raw-response">
                                <pre id="response-result" style="max-height: 90%;"></pre>
                            </div>
                            <div class="tab-pane " id="img-response">
                                <div style=" justify-content: center; display: flex; flex-wrap: wrap;">
                                    <div style=" flex-basis: 100%; text-align: center;" class="cboxElement" data-rel="colorbox">
                                        <img id="img-response-preview" src="" style="max-width:250px;" />
                                    </div>
                                    @*<div style=" text-align: center; padding: 20px;"><button class="btn btn-primary">去提取</button></div>*@
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!-- /.modal-content -->

            <button class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn" id="btn-right" data-target="#right-menu" data-toggle="modal" type="button">

                <i data-icon1="fa-plus" data-icon2="fa-minus" class="ace-icon fa bigger-110 icon-only fa-plus"></i>
            </button>
        </div><!-- /.modal-dialog -->
    </div>

</div>

<script>

    var queryParams = {

        marker: '',
        type: 0
    };

    var postParams = {
        optype: 1,//1 上传 2 下载
        waterMarkType: 1,
        originImg: {
            ObjectKey: '',
            FileData: '',
            uploadStatus: 0,
            PreviewUrl: ''
        },
        watermarkImg: {
            ObjectKey: '',
            FileData: '',
            uploadStatus: 0,
            PreviewUrl: ''
        },
        watermarktext: '',

        level: 3

    }

    var previewImg = "";

    $(function () {
        var originImg = {
            width: 0,
            height: 0,
            filedata: ''
        };
        var watermarkImg = {
            width: 0,
            height: 0,
            filedata: ''
        }
        Init();





        $('#watermarkform').on('change', 'input[type=file]', function () {


            var file = this.files[0];
            var imgSize = this.files[0].size;  //b



            //$("#origin-img").attr("src", URL.createObjectURL(file));
            //return;
            //创建读取文件的对象
            var reader = new FileReader();
            //创建文件读取相关的变量
            var imgFile;
            var that = this;
            var order = $(that).data('order');

            $('.steps li').eq(order).addClass('active');


            //为文件读取成功设置事件
            reader.onload = function (e) {
                // alert('文件读取完成');
                imgFile = e.target.result;

                var imgEl = $(that).parent().siblings('.img-wrapper').children('.img-container');
                var info = $(that).parent().siblings('.center-block');
                imgEl.attr('src', imgFile);

                var width = imgEl[0].naturalWidth;
                var height = imgEl[0].naturalHeight;
                $(that).parent().parent().siblings('.img-meta').append(`<b>${width}x${height}</b>`);
                //原图片
                if (order == 1) {
                    originImg.width = width;
                    originImg.height = height;
                    originImg.filedata = imgFile;

                    postParams.originImg.ObjectKey = timestampFileName(file.name);
                    postParams.originImg.FileData = imgFile.replace(/^data:image\/\w+;base64,/, '');
                    postParams.originImg.uploadStatus = 0;//状态为待上传

                }
                else if (order == 2) {
                    watermarkImg.width = width;
                    watermarkImg.height = height;
                    watermarkImg.filedata = imgFile;

                    postParams.watermarkImg.ObjectKey = timestampFileName(file.name);
                    postParams.watermarkImg.FileData = imgFile.replace(/^data:image\/\w+;base64,/, '');
                    postParams.watermarkImg.uploadStatus = 0;//状态为待上传
                }

                enableSumbit();
                imgEl.show();
                imgEl.viewer();
                info.hide();
                //$("#origin-img").attr('src', imgFile);
                //$("#origin-img").show();
                //$('.icon-add_css').hide();
                //$('.glyphicon-pencil').show();

            };

            //正式读取文件
            reader.readAsDataURL(file);

        })


        $('#submit').click(function () {

            $('#response-result').empty();
            postParams.level = $("#level-row select").find("option:selected").val();

            if (postParams.optype == 1) {
                $.post("/api/WaterMark/AddWhenUpload", postParams,

                    function (res, status) {

                        if (res) {
                            if (res.success) {
                                postParams.originImg.uploadStatus = 1;
                                postParams.watermarkImg.uploadStatus = 1;
                                $.niceAlert.success("添加成功");
                            }
                            else {
                                $.niceAlert.error("添加失败,具体信息查看控制台");
                            }
                            var header = res.data.Header;
                            var body = res.data.Body;
                            res.data.Header = JSON.parse(header);
                            res.data.Body = formatXml(body);
                            var str = JSON.stringify(res, null, 4);
                            $('#response-result')[0].innerHTML = syntaxHighlight(str);
                            $('#right-menu').addClass('hasval');
                            $('#right-menu').modal('show');
                            //$('#response-result').append(data);
                            $('#img-response-preview').attr('src', res.data.ProcessResult.previewurl);
                            $('#img-response-preview').parent('a').attr('href', res.data.ProcessResult.previewurl);
                            $(' #img-response-preview').css('cursor', 'zoom-in');
                            $(' #img-response-preview').viewer();
                        }
                    });
            }
            else if (postParams.optype == 2) {

                $.ajax({
                    type: "post",
                    url: "/api/WaterMark/AddWhenDownLoad",
                    data: postParams,
                    xhrFields: {
                        responseType: 'blob' // to avoid binary data being mangled on charset conversion
                    },
                    success: function (blob, status, xhr) {
                        // check for a filename
                        var filename = "";
                        var disposition = xhr.getResponseHeader('Content-Disposition');
                        if (disposition && disposition.indexOf('attachment') !== -1) {
                            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            var matches = filenameRegex.exec(disposition);
                            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                        }

                        if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                            window.navigator.msSaveBlob(blob, filename);
                        } else {
                            var URL = window.URL || window.webkitURL;
                            var downloadUrl = URL.createObjectURL(blob);
                            if (filename) {
                                // use HTML5 a[download] attribute to specify filename
                                var a = document.createElement("a");
                                // safari doesn't support this yet
                                if (typeof a.download === 'undefined') {
                                    window.location.href = downloadUrl;
                                } else {
                                    a.href = downloadUrl;
                                    a.download = filename;
                                    document.body.appendChild(a);
                                    a.click();
                                }
                            } else {
                                window.open(downloadUrl);
                            }

                            setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                        }
                    }
                });

            }
        })

        $('.img-gallery-btn').click(function () {

            queryParams.marker = '';

            $('#img-list').empty();
            var wrapperid = $(this).data('imgwrapper');
            if (wrapperid == "origin-img") {
                queryParams.type = 0;
            }
            else {
                queryParams.type = 1;
            }
            var text = $(this).attr('title');
            $('#modal-gallery .modal-title').text(text);
            $('#img-list').attr('data-target', wrapperid);
            fetchCosImage();
        })

        $('#btn-loadmore').click(function () {
            fetchCosImage();
        })

        $('#img-list').on('click', ' li', function () {
            var el = $(this);
            var className = el.attr('class');
            var seleted = false;
            seleted = className == 'selected';

            //$('#img-list li').each((n) => {
            //    console.log($(this))
            //    $(this).removeClass('selected');
            //})
            $('#img-list li').each(function () { $(this).removeClass('selected') })


            if (!seleted) el.addClass('selected');

        })

        $('#gallery-submit').click(function () {
            var selected = false;
            var src = '';
            var objectKey = ''
            var width = 0;
            var height = 0;

            $('#img-list li').each(function () {
                var className = $(this).attr('class');
                if (className == 'selected') {
                    selected = true;
                    var imgel = $(this).children('img');
                    src = imgel.attr('src');
                    objectKey = imgel.attr('data-key');
                    width = this.naturalWidth;
                    height = this.naturalHeight;
                    return true;
                }
            })
            if (!selected) $.niceAlert.warnning('请选择一张图片！');
            else {
                var selector = $('#img-list').attr('data-target');

                var imgEl = $('#' + selector);
                var info = $('#' + selector).parent().siblings('.center-block');

                imgEl.attr('src', src);
                imgEl.show();
                imgEl.viewer();
                info.hide();
                $('#modal-gallery').modal('hide');

                //原图片
                if (selector == 'origin-img') {
                    postParams.originImg.ObjectKey = objectKey;

                    if (postParams.waterMarkType == 1 && (width > 640 || height > 640)) {
                        imgEl.hide();
                        info.show();
                        $.niceAlert.error('半盲水印的原图片尺寸不能大于640*640');
                        imgEl.attr('src', '');
                        return;
                    }

                    $('.steps li').eq(1).addClass('active');

                    postParams.originImg.uploadStatus = 1;//状态为已上传
                    postParams.originImg.PreviewUrl = src;
                } //水印图片
                else {
                    postParams.watermarkImg.ObjectKey = objectKey;
                    $('.steps li').eq(2).addClass('active');
                    postParams.watermarkImg.uploadStatus = 1;//状态为已上传
                    postParams.watermarkImg.PreviewUrl = src;
                }
                enableSumbit();
            }
        })





        $('#watermarkform').on('click', 'input[type=radio]', function () {
            if ($(this).parent().parent().attr('id') == 'op-type-radio') {
                reset();
            }
            toggleRadio(this);
            enableSumbit();
        })


    });

    function toggleRadio(radio) {
        var type = $(radio).data('val');

        var container = $(radio).parent().parent();

        var targetSeletor = $(radio).data('target');
        container.siblings('#type-remark').children('.remark').hide();
        $('#' + targetSeletor).show();
        if (container.attr('id') == 'op-type-radio') {

            postParams.optype = type;
            switch (type) {
                case 1: {
                    $('#origin-img-gallery').hide();
                    $('#origin-img-upload').show();
                    break;
                }
                case 2: {
                    $('#origin-img-upload').hide();
                    $('#origin-img-gallery').show();
                }

            }
        }
        else if (container.attr('id') == 'type-radio') {
            switch (type) {
                case 1: {
                    $('#watermark-img-row').show();
                    $('#watermark-text-row').hide();
                    $('#origin-remark').show();
                    $("#level-row").hide();

                    break;
                };
                case 2: {
                    $('#watermark-img-row').show();
                    $('#watermark-text-row').hide();
                    $('#origin-remark').hide();
                    $("#level-row").show();
                    break;
                };
                case 3: {
                    $('#watermark-img-row').hide();
                    $('#watermark-text-row').show();
                    $('#origin-remark').hide();
                    $("#level-row").hide();
                    break;
                };
            };
            postParams.waterMarkType = type;
        }





    }

    function fetchCosImage() {

        var url = '/api/WaterMark/GetImagesFromBucket';
        var param = {};

        //param = 'marker = ' + queryParams.marker;
        param = {
            marker: queryParams.marker,
            type: queryParams.type
        };

        $.get(url, param, function (res, status) {
            $('#img-list').innerHtml = '';
            var innerHtml = '';
            if (res.success) {
                var data = res.data;
                data.list.forEach(n => {
                    innerHtml = innerHtml + `<li><img src=${n.PreviewUrl} data-key='${n.ObjectKey}' onload='getImgInfo(this)'><div class='img-wrapper'><i class="ace-icon fa fa-check"></i></div><span class='img-info'></span></li>`
                })
                if (data.marker) {
                    $('#btn-loadmore').show();

                }
                else {
                    $('#btn-loadmore').hide();
                }
                queryParams.marker = data.marker;
                $('#img-list').append(innerHtml);
            }

        })

    }

    function getBase64Image(img) {
        img.setAttribute('crossOrigin', 'anonymous');
        var canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        var dataURL = canvas.toDataURL('image/' + ext)
        return dataURL
    }

    function enableSumbit() {
        $("#submit").attr("disabled", true);
        if (postParams.waterMarkType == 1 || postParams.waterMarkType == 2) {
            if (postParams.originImg.ObjectKey && postParams.watermarkImg.ObjectKey)
                $("#submit").removeAttr("disabled");

        }
        else if (postParams.waterMarkType == 3) {
            if (postParams.watermarktext)
                $("#submit").removeAttr("disabled");
        }
        else {
            $("#submit").attr("disabled", true);
        }
    }


    function timestampFileName(fileName) {
        return fileName;
        var newName = '';
        if (fileName.indexOf('.') > 0) {
            var array = fileName.split('.');
            var realName = array[0];
            var extension = array[1];
            newName = realName + '-' + Date.now() + "." + extension;
        }
        else {
            newName = fileName + Date.now() + "." + 'jpg';
        }

        return newName;
    }

    function getImgInfo(img) {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        //$(img).siblings('.img-wrapper').children('.img-info').text(width + 'x' + height)

        $(img).parent('li').children('.img-info').text(width + 'x' + height);
    }


    function calMeta(img) {
        var width = img.naturalWidth;
        var height = img.naturalHeight;
        $(img).parent().parent().siblings('.img-meta').text(width + 'x' + height);
        return;
        if (postParams.waterMarkType == 1 && (width > 640 || height > 640)) {

            var info = $(img).parent().siblings('.center-block');
            $(img).hide();
            info.show();
            $.niceAlert.error('半盲水印的原图片尺寸不能大于640*640');

            $(img).attr('src', '');
            return;
        }
    }
    function copy() {
        var el = document.getElementById("response-result");
        var content = el.innerText;
        var oInput = document.createElement('input');
        oInput.value = content;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
        $(oInput).remove();
        $.niceAlert.success('复制完毕');

    }

    function reset() {
        $("#submit").attr("disabled", "true");

        postParams.optype = 1;
        postParams.originImg = {};
        postParams.watermarkImg = {};
        postParams.level = 1;
        postParams.waterMarkType = 1;
        $('select').children('option').removeAttr('selected');
        $('select').children('option').eq(0).attr('selected', 'true');

        $('#origin-img').attr('src', '');
        $('#origin-img').hide();
        $('#watermark-img').attr('src', '');
        $('#watermark-img').hide();
        $('.center-block').show();
    }
    function Init() {


        //$('input:radio:checked').removeAttr('checked')

        reset();

        var firstRadio = $('#type-radio').children().children('input[type=radio]:first')
        firstRadio.prop('checked', 'true');
        toggleRadio(firstRadio);
        $('#type-remark').children('.remark').hide();


        firstRadio = $('#op-type-radio').children().children('input[type=radio]:first')
        firstRadio.prop('checked', 'true');
        $('#op-type-radio').children('.remark').hide();
        toggleRadio(firstRadio);




        toggleRadio(firstRadio);
        $('.content img').css('cursor', 'zoom-in');


    }
    //$('#origin-img-uploader').on('change', function () {

    //    if (this.files.length == 1) {

    //    }
    //    var file = this.files[0];
    //    var imgSize = this.files[0].size;  //b
    //    if (imgSize > 1024 * 1024 * 1) {//1M
    //        return alert("上传图片不能超过1M");
    //    }
    //    if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
    //        return alert("图片上传格式不正确");
    //    }

    //    //$("#origin-img").attr("src", URL.createObjectURL(file));
    //    //return;
    //    //创建读取文件的对象
    //    var reader = new FileReader();
    //    //创建文件读取相关的变量
    //    var imgFile;
    //    //为文件读取成功设置事件
    //    reader.onload = function (e) {
    //        // alert('文件读取完成');
    //        imgFile = e.target.result;
    //        console.log(imgFile);
    //        $("#origin-img").attr('src', imgFile);
    //        $("#origin-img").show();
    //        $('.icon-add_css').hide();
    //        //$('.glyphicon-pencil').show();

    //    };

    //    //正式读取文件
    //    reader.readAsDataURL(file);

    //})
    //});

    function formatXml(str) {
        //var parser = new DOMParser();
        //parser.parseFromString(str, 'text/xml');

        return $.xml2json(str);
    }


    function InitParams() {

        postParams.originImg.uploadStatus = 1;
        postParams.watermarkImg.uploadStatus = 1;

    }

    function SubmitValidation() {

        //if (postParams.optype)
    }

</script>
